<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title >淘宝店铺订单 - 订单管理- 电商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }

        .T-box {
            width: 400px;
            padding: 0 20px;
            text-align: left;
        }

        .T-box p {
            position: relative;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .T-box p span {
            display: inline-block;
            padding-right: 15px;
            text-align: right;
            width: 110px;
            line-height: 36px;
            font-size: 14px;
        }

        .T-box p input, .T-box p select {
            width: 160px;
            padding: 0 5px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            border: 1px solid #d3d3d3;
            outline: none;
        }

        .T-box p i {
            padding: 0 10px;
            line-height: 36px;
            font-style: normal;
        }

        .T-box p b {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #c33;
            color: #fff;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
        }

        .T-result {
            margin-bottom: 0;
        }

        .T-result em {
            color: #c33;
            font-style: normal;
        }
    </style>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <li><a th:href="@{/tao/dashboard(shopId=${shopId})}">首页</a></li>
            <li class="layui-this"><a th:href="@{/tao/order_list(shopId=${shopId})}">订单管理</a></li>
            <!-- <li><a th:href="@{/tao/order_create(shopId=${shopId})}">手动创建订单</a></li> -->
            <li ><a th:href="@{/tao/refund_list(shopId=${shopId})}">退货管理</a></li>
            <!-- <li ><a th:href="@{/tao/goods_list(shopId=${shopId})}">商品管理</a></li> -->
            <li ><a th:href="@{/tao/goods_traffic_list(shopId=${shopId})}">商品流量管理</a></li>
            <li ><a th:href="@{/tao/goods_optimization_record(shopId=${shopId})}">商品优化记录</a></li>
        </ul>

    </div>

    <!-- content starts -->


    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get" action="/tao/order_list">
                <input type="hidden" name="shopId" th:value="${shop.id}"/>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" autocomplete="off" name="orderId" placeholder="订单编号" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="mobile" placeholder="收货人手机号" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">下单时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="startTime" id="startTime" autocomplete="off"
                                   style="width: 120px;" placeholder="yyyy-MM-dd">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="endTime" id="endTime" autocomplete="off"
                                   placeholder="yyyy-MM-dd" style="width: 120px;">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="status" id="status">
                                <option value="">全部订单</option>
                                <option th:each="item:${T(com.b2c.entity.enums.third.EnumTmallOrderStatus).values()}"
                                        th:value="${item.status}" th:text="${item.name}">等待付款
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn ">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>
                    <div class="layui-inline">
                        <span id="upd_order" class="layui-btn layui-btn-normal">更新Tao订单</span>
                        <span id="upd_order_" style="display: none;" class="update"><i></i>更新中</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <!-- <div class="layui-inline">
                            <form method="post" enctype="multipart/form-data" id="execl_form">
                                <input type="file" name="excel" id="excel" placeholder="" class="layui-input">
                            </form>
                        </div> -->

                        <div class="layui-inline">
                            <a type="button" th:href="@{/tao/order_excel_import_review(shopId=${shop.id})}" class="layui-btn layui-btn-primary">导入淘宝订单excel
                            </a>
                            <!-- <a href="/importTemplates/tmall_receiver_moban.xlsx" target="_blank" style="color: #007DDB">收货地址补充模版下载</a> -->
                            <span id="excel_upload_btn_" style="display: none;" class="update"><i></i>导入中</span>
                            <a th:href="@{/tao/order_create(shopId=${shopId})}">手动创建订单</a>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-primary" href="javascript:;" id="export_order">导出订单数据</a>
                    </div>
                </div>
            </form>


        </div>
    </fieldset>


    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">

<!--            <input type="hidden" name="shopId" th:value="${shop.id}">-->
<!--            <div class="layui-inline" style="padding-bottom: 10px;">-->
<!--                <input type="button" class="layui-btn layui-btn-primary" id="batch_set_order_type" th:attr="shop-id=${shop.id}" value="批量关联业务员(0)"/>-->
<!--            </div>-->

            <table class="dd-table">
                <tr>
                    <th width="150px">
                        <input id="allCheck" type="checkbox"/>
                        订单号
                    </th>
                    <th width="20%">商品</th>
                    <th>订单金额</th>
                    <th>收件人</th>
                    <th>发货信息</th>
                    <th>订单状态</th>

                    <th width="200px">操作</th>
                </tr>
                <tr th:each="item:${lists}">
                    <td>
                        <input type="checkbox" class="currCheck" name="orderIds" th:value="${item.id}" th:text="${item.id}" />
                        <span style="color:#a3a3a3;" th:text="${ item.createTime}"></p>
                    </td>
                    <td>
                        <div th:each="it:${item.items}"><img
                                th:src="${it.productImgUrl}">
                            <p>
                                <span th:text="${#strings.abbreviate(it.goodsTitle,18)}"></span><br/>
                                规格：[[${it.skuInfo}]]<br/>
                                单价: ¥[[${it.price}]] 数量：X[[${it.quantity.intValue()}]]
                                <span href="javascript:;" th:if="${it.refundStatus > 0}" style="color: rgb(213, 19, 19);" class="layui-btn-primary">有售后</span>
                                <a href="javascript:;" th:if="${it.refundStatus==0}" style="color: rgb(234, 225, 225);" th:attr="item-id=${it.id}" class="layui-btn-primary refund_apply">退货</a>
                            </p>
                        </div>
                    </td>
                    <td><b>¥[[${item.totalAmount}]]</b><br>（含运费：¥[[${item.shippingFee}]]）</td>
                    
                    <td>
                        <div th:if="${#strings.isEmpty(item.contactPerson)}" style="color: red">
                            还没有收货人信息，请补充
                        </div>
                        <div th:if="${#strings.isEmpty(item.contactPerson)==false}">
                            <p>[[${item.contactPerson}]]&nbsp;[[${item.mobile}]]&nbsp;</p>
                            <p>[[${item.province}]]&nbsp;[[${item.city}]]&nbsp;&nbsp;[[${item.area}]]</p>
                            <!-- <p>[[${item.address}]]</p> -->
                            
                            
                        </div>
                    </td>
                    <td>
                        <span>[[${item.logisticsCode}]]</span>
                        <span>[[${item.logisticsCompany}]]</span>
                        <p style="color:#007DDB;" th:text="${#dates.format(item.sendTime * 1000, 'yyyy-MM-dd HH:mm:ss')}"></p>
                    </td>
                    <td>
                        <!--                    <span th:text="${item.statusStr}" ></span><br />-->
                        <span th:text="${T(com.b2c.entity.enums.third.EnumTmallOrderStatus).getName(item.status)}"></span><br/>
                        <span th:if="${item.auditStatus == 0 }" style="color: red">待确认</span>
                        <span th:if="${item.auditStatus == 1 }" style="color: red">已确认</span>
                        <a class="layui-btn-xs layui-btn-primary confirm_order" href="javascript:;"
                           th:if="${item.auditStatus == 0 }" th:attr="data-id=${item.id},shop-id=${shop.id}">确认订单</a>
                    </td>
                    <td>
                        <a th:href="@{/tao_order/detail(id=${item.getId()},shopId=${shop.id})}">查看详情</a>

                        
                           <!--&& item.status == T(com.b2c.entity.enums.third.EnumTmallOrderStatus).WAIT_SEND_GOODS.getStatus()-->

                        <a th:if="${item.getAuditStatus() == 1 && item.sendStatus == 4 && item.status == 2 }"
                           th:attr="order-id=${item.getId()}" class="order_send layui-btn layui-btn-normal layui-btn-sm"
                           style="color: #FFFFFF">同步物流到tao</a>
                        <!-- <a href="javascript:;" class="updateOrderByNum" th:attr="data-id=${item.id}">更新</a> -->
                        <a th:if="${item.status == 2}" class="hand_express layui-btn layui-btn-xs layui-btn-primary" th:attr="data-id=${item.getId()}">手动填写快递单</a>
                        <p th:if="${#strings.isEmpty(item.buyerFeedback)==false}"><b th:text="${item.buyerFeedback}" style="color: rgb(0, 180, 72)"></b></p>
                        <p th:if="${#strings.isEmpty(item.sellerMemo) ==false }"><b th:text="${item.sellerMemo}" style="color: red"></b></p>
                    </td>
                </tr>
            </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>

    <script type="text/template" id="send-goods">
        <div class="T-box">
            <p><span>快递公司</span>
                <select id="send-company">
                    <option value="">请选择快递公司</option>
                    <option th:each="item:${company}" th:value="${item.getCode()}" th:text="${item.getName()}"></option>
                </select>
            </p>
            <p><span>快递单号</span><input type="text" name="express_code"/></p>
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>
    <!--<script src="/jquery-3.3.1.min.js"></script>-->
    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;

        //计算天数差的函数，通用
        function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2019-3-12格式
            var aDate, oDate1, oDate2, iDays
            aDate = sDate1.split("-")
            oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为9-25-2017格式
            aDate = sDate2.split("-")
            oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数
            return iDays
        }

        function getNum() {
            var num = 0;
            for (var i = 0; i < $('.currCheck').length; i++) {
                var checked = $('.currCheck').eq(i).prop('checked');
                if (checked) {
                    num++;
                }
            }
            return num;
        }

        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;
            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });


            $("#status").val('[[${status}]]');
            form.render('select'); //刷新select选择框渲染
            console.log($("#status").val());

            if($("#status").val()==2){
                $("#status_menu li:nth-child(1)").addClass("layui-this");
                $("#status_menu li:nth-child(2)").removeClass("layui-this");
            }else{
                $("#status_menu li:nth-child(2)").addClass("layui-this");
                $("#status_menu li:nth-child(1)").removeClass("layui-this");
            }


            $("#export_order").click(function () {
                var urlLink = window.location.href;
                var exportLink = "/tao/order_list_export?shopId=[[${shop.id}]]&status="+$('#status').val()+"&startTime="+$('#startTime').val()+"&endTime="+$("#endTime").val();
                window.open(exportLink);
            });


            //AJAX 上传订单收货人信息
            $("#excel_upload_btn").click(function () {
                var excel = $("#excel").val();
                if (excel == '') {
                    alert("请选择文件");
                    return false;
                } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    alert("只能上传Excel文件");
                } else if (excel.lastIndexOf(".xlsx") < 0) {
                    alert("只能上传Excel文件");
                } else {
                    var url = "/ajax_tao/import_execl_for_tao";
                    $("#execl_form").submit();
                    // var formData = new FormData($('#execl_form')[0]);

                    var formData = new FormData();
                    formData.append("excel", document.getElementById("excel").files[0]);
                    $(this).hide();
                    $("#excel_upload_btn_").show();
                    $.ajax({
                        url: url,
                        type: "post",
                        data: formData,
                        success: function (res) {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            if (res.code == 0) {
                                alert("更新成功:");
                                window.location.href = "/tao_order/list?shopId=[[${shop.id}]]";
                            } else {
                                alert("更新失败:" + res.msg);
                            }

                            // alert(JSON.stringify(result));
                            return false;
                        },
                        error: function () {
                            alert("excel上传失败");
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }

                return false;
            })


            $(function () {

                $(".refund_apply").click(function(){
                var itemId = $(this).attr('item-id');
            
                var obj = $(this).siblings('b').eq(0);

                layer.prompt({
                    formType: 3,
                    title: '请输入退货单ID'
                }, function(value, index, elem){
                    var data = {itemId:itemId, refundId:value};
                    $.ajax({
                        url: "/ajax_tao/order_refund_apply",
                        type: "POST",
                        dataType: "JSON",
                        contentType: 'application/json',
                        data:JSON.stringify(data),
                        success: function (res) {

                            if(res.code == 0){

                                $(obj).text(value);
                                layer.close(index)
                                layer.msg(res.msg);
                                // location=location;
                            }else
                                layer.alert(res.msg);
                        }
                    });


                });
            });

                //确认订单start
                $(".confirm_order").click(function () {
                    var orderId = $(this).attr("data-id");
                    var shopId = $(this).attr("shop-id");
                    //确认订单iframe层
                    layer.open({
                        type: 2,
                        title: '订单确认',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['480px', '650px'],
                        content: '/tao/order_confirm?orderId='+orderId+"&shopId="+shopId //iframe的url
                    });
                });//确认订单end

                //更新订单根据退款单号
                $(".updateOrderByNum").click(function () {
                    var orderId = $(this).attr("data-id");
                    $.ajax({
                        url: "/tao_ajax/pull_order_by_num",
                        type: "POST",
                        dataType: "JSON",
                        contentType: 'application/json',
                        data:JSON.stringify({shopId:'[[${shop.id}]]',orderId:orderId}),
                        success: function (res) {
                            if (res.code == 0) {
                                Tips.alert({
                                    title: '更新订单',
                                    content: '【' + res.msg + '】',
                                    define: function () {
                                        window.location.reload();
                                    }
                                });

                            } else if (res.code == 601) {
                                // $("#upd_order").show();
                                // $("#upd_order_").hide();
                                alert(res.msg);
                                // Tips.alert(res.msg);
                                location.href = "/tao_oauth?shopId=[[${shop.id}]]";
                            } else {
                                Tips.alert(res.msg);
                            }
                        }
                    })
                })

                //批量设置订单类型
                $("#batch_set_order_type").click(function () {
                    var shopId = $(this).attr("shop-id");
                    var ids = [];
                    var urlParam = "";
                    $("input[name^='orderIds']").each(function (i, el) {
                        if ($(this).is(':checked')) {
                            var oid = $(this).val();
                            ids.push(oid);
                            urlParam += "&orderIds=" + oid;
                        }
                    });

                    //console.log(ids);
                    if (ids.length == 0)
                        alert("请选择要关联的订单");
                    else {

                        //关联业务员iframe层
                        layer.open({
                            type: 2,
                            title: '订单确认',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['660px', '650px'],
                            content: '/developer_order/link_developer?shopId=' + shopId + urlParam //iframe的url
                        });
                        // $("#order_type_confirm").submit();
                    }

                });

                $('#allCheck').on('change', function () {
                    var checked = $('#allCheck').prop('checked');
                    $('.currCheck').prop('checked', checked);
                    $('#batch_set_order_type').val('批量关联业务员(' + getNum() + ')')
                });

                $('.currCheck').on('change', function (e) {
                    var allChecked;
                    for (var i = 0; i < $('.currCheck').length; i++) {
                        var checked = $('.currCheck').eq(i).prop('checked');
                        if (!checked) {
                            $('#allCheck').prop('checked', false);
                            $('#batch_set_order_type').val('批量关联业务员(' + getNum() + ')')
                            return;
                        }
                    }
                    $('#allCheck').prop('checked', true);
                    $('#batch_set_order_type').val('批量关联业务员(' + getNum() + ')')
                });

                //查看物流
                $(".wuliu").click(function () {
                    var orderId = $(this).attr("order-id");
                    var obj = $(this);
                    $.ajax({
                        url: "/api/order_wuliu",
                        type: "post",
                        dataType: "json",
                        contentType: 'application/json',
                        data: orderId,
                        success: function (res) {
                            var html = '<div style="padding: 30px">\n';
                            html += '            <ul>\n';
                            if (res.code == 0) {
                                $.each(res.data, function (i, item) {
                                    html += '<li style="margin-bottom: 15px;"><span >' + item.time + '</span><em style="padding-left: 10px">' + item.context + '</em></li>\n';
                                })
                                html += '            </ul>\n' +
                                    '        </div>';
                                windowOpen = layer.open({
                                    type: 1,
                                    title: "物流信息",
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['620px', '480px'], //宽高
                                    content: html
                                });
                            } else {
                                alert(res.msg);
                            }

                        }
                    })
                });
                //更新订单
                $("#upd_order").click(function () {
                    $("#upd_order").hide();
                    $("#upd_order_").show();
                    $.ajax({
                        url: "/tao_ajax/pull_order",
                        type: "POST",
                        dataType: "JSON",
                        contentType: 'application/json',
                        data: JSON.stringify({shopId: '[[${shop.id}]]'}),
                        success: function (res) {
                            if (res.code == 0) {
                                Tips.alert({
                                    title: '更新订单',
                                    content: '更新成功：【' + res.msg + '】',
                                    define: function () {
                                        location.href = "/tao_order/list?shopId=[[${shop.id}]]";
                                    }
                                });
                            } else if (res.code == 601) {
                                // $("#upd_order").show();
                                // $("#upd_order_").hide();
                                alert(res.msg);
                                // Tips.alert(res.msg);
                                location.href = "/tao_oauth?shopId=[[${shop.id}]]";
                            } else {

                                Tips.alert(res.msg);
                            }
                            $("#upd_order").show();
                            $("#upd_order_").hide();
                        }
                    })
                });

                //订单发货
                $(".order_send").click(function () {
                    var data1 = {
                        orderId: $(this).attr("order-id"),
                        shopId: '[[${shop.id}]]'
                    };
                    var $this = $(this);
                    if (confirm("同步物流到淘宝！该操作不可逆，确定要操作吗？")) {
                        $.ajax({
                            url: "/tao_ajax/push_order_logistics",
                            type: "post",
                            dataType: "json",
                            contentType: 'application/json',
                            data: JSON.stringify(data1),
                            success: function (res) {
                                alert(res.msg);
                                if (res.code == 0) {
                                    $this.remove();
                                } else {
                                    alert(res.msg);
                                }
                            }
                        })
                    }

                });

            // 填写物流
            $('.hand_express').click(function (e) {
                e.stopPropagation();
                e.preventDefault();
                var id = $(this).attr('data-id');
                Tips.confirm({
                    title: '手动填写物流信息',
                    content: $('#send-goods').html(),
                    define: function () {
                        var data = {
                            id: id,
                            company: $("#send-company  option:selected").text(),
                            companyCode: $("#send-company  option:selected").val(),
                            code: $("input[name='express_code']").val()
                        };
                        $.ajax({
                            url: "/ajax_tao/order_hand_send",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                if (res.code == 0) {
                                    Tips.alert('成功', function () {
                                        location.reload(true);
                                    });
                                } else {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    }
                });
            });

            })
        });

    </script>

    <!-- 模板  -->
    <script type="text/template" id="tpl-group">
        <div class="T-box" style="width: 1000px">
            <div class="dd-log">
                <ul id="sendContext">
                </ul>
            </div>
        </div>
    </script>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.edit').click(function () {
                var id = $(this).attr('order-id');
                Tips.alert({
                    title: '查看物流',
                    content: $('#tpl-group').html(),
                    render: function () {
                        $.ajax({
                            url: "/ali_ajax/order_logistics",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: id,
                            success: function (res) {
                                if (res.code == 0) {
                                    var sum = "<li>订单编号:" + res.data[0].orderId + "</li>";
                                    var log = res.data[0].logisticsSteps;
                                    for (var i = 0; i < log.length; i++) {
                                        var html = "<li>"
                                            + "<i></i><span>物流跟踪:" + log[i].acceptTime + "</span><span>" + log[i].remark + "</span></li>";
                                        +"</li>"
                                        sum = sum + html;
                                    }
                                    $("#sendContext").html(sum);
                                } else {
                                    alert(res.msg);
                                    location.reload(true);
                                }
                            }
                        });
                        return false;
                    }
                });
            });
        })
    </script>
</div>
</body>
<html>
